<template>
  <div class="w1200 hospital_detail_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb  class="el_breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          ><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><nuxt-link to="/news">资讯</nuxt-link></el-breadcrumb-item
        >
        <el-breadcrumb-item>{{ newsInfo.articleName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <!-- 内容 开始 -->
    <div class="content">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 资讯详情 开始 -->
        <div class="news_detail">
          <div class="title">
            <h2 class="h2">{{ newsInfo.articleName }}</h2>
            <div class="author">
              <div class="avatar">
                <img src="@/assets/images/avatar.png" class="img" alt="" />
              </div>
              <div class="info">
                <span class="name">{{ newsInfo.articleAuthor }}</span>
                <div class="time">
                  <span> {{ newsInfo.orderTime }}</span>
                  <span>{{ newsInfo.initReadCnt }}浏览</span>
                </div>
              </div>
            </div>
          </div>
          <div class="outpatientIntroduce" v-html="newsInfo.content"></div>
          <!-- <div class="row_box">
                        <div class="row_head">{{ newsInfo.articleName }}</div>
                        <div class="row_content">
                            <div class="outpatientIntroduce" v-html="newsInfo.content"></div>
                        </div>
                    </div> -->
        </div>
        <!-- 资讯详情 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <!-- 热门推荐 开始 -->
        <!-- <div class="problem_box">
                    <div class="head">热门推荐</div>
                    <div class="list_box doctor_list">
                    </div>
                </div> -->
        <!-- 热门推荐 end -->

        <!-- 相关推荐 开始 -->
        <div class="problem_box">
          <div class="head">相关推荐</div>
          <div class="list_box">
            <!-- <Goods v-for="(item, index) in goodsList" :key="`goods_${index}`" :info="item" /> -->
            <div
              class="news_cell"
              :class="index == 0 ? 'news_cell_first' : ''"
              v-for="(item, index) in newsList"
              :key="`news_${index}`"
            >
              <div class="img_box" v-if="index == 0">
                <nuxt-link :to="`/news/${item.id}`">
                  <li-image :src="item.photograph" class="img" />
                </nuxt-link>
              </div>
              <div class="cell">
                <nuxt-link :to="`/news/${item.id}`" class="ellipsis">{{
                  item.articleName
                }}</nuxt-link>
              </div>
              <!-- <div class="cell ellipsis">
                
                {{ item.articleName }}
              </div> -->
            </div>
          </div>
        </div>
        <!-- 相关推荐 end -->
      </div>
      <!-- 右侧内容 end -->
    </div>
    <!-- 内容 end -->
  </div>
</template>
<script>
import { GET_ARTICLE_INFO, GET_ARTICLE_SEARCH } from "@/http/interface";
export default {
  components: {},
  data() {
    return {
      newsInfo: {},
      title: "",
      description: "",
      keywords: "",
      newsList: [],
      newsId:''
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
        {
                    name:'mobile-agent',
                    content:"format=html5",
                    url:`https://m.lilikq.com/news/detail/${this.newsId}`
                }
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/news/${this.newsId}`}
      ]
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios, params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_ARTICLE_INFO, { params: _params });
    let newsInfo = res.data || {};

    // 资讯列表
    // let nres = await $axios.get(GET_ARTICLE_SEARCH, { params: params })
    // let obj = nres.data || {}
    let newsList = newsInfo.relArticles || [];

    return {
      newsInfo,
      newsList,
      title: newsInfo.seoTitle,
      keywords: newsInfo.seoKeywords,
      description: newsInfo.seoDescription,
      newsId:params.id
    };
  },
  mounted() {},
  methods: {
    // 动态获取className
    getClassName(index) {
      if (index % 3 == 0) {
        return "";
      }
      if (index % 3 == 1) {
        return "blue";
      }
      if (index % 3 == 2) {
        return "dark_blue";
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/news/detail.less";
</style>